<!--
 * @Autor: 王琛
 * @Description: 图文按钮
 * @Copyright: 版权归个人所有
-->
<style lang="stylus" scoped>
#imgText {
  width: 75px;
  height: 50px;
  position: relative;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0px 0px 0px #b9a083;
  margin: 5px 0px 5px;
  transition: all .5s;

  & > p {
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    color: #fff;
    background: rgba(0, 0, 0, .8);
    position: absolute;
    bottom: 0px;
    left: 0px;
    pointer-events: none;
  }
}

#imgText.imgText {
  box-shadow: 0px 0px 8px #b9a083;
}
</style>


<template>
  <div id="imgText" :class="{ imgText:_props.isSelect }" :style="{background:`url('${_props.config.bg_img}') no-repeat center center / 100% 100%`}">
    <!-- 文案 -->
    <p class="copywriting">{{ _props.config.name }}</p>
  </div>
</template>


<script setup lang="ts">
import {reactive} from "vue";
import {useRouter} from "vue-router";
import {useStore} from "vuex";

const _props = defineProps({
  // 配置必要数据
  config: {
    type: Object,
    default: () => {
      return {
        name: "我是按钮",
        key: "myImBtn",
        bg_img: "http://sanwei.sanweiyitivr.com/ffbj/B.png",
      }
    }
  },
  // 是否选择
  isSelect: {
    type: Boolean,
    default: false,
  }
})
const _data = reactive({});
</script>

